<template>
	<div>
		<div v-if="orderlist.length>0">
			<!-- 我的订单主要内容 -->
			<div class="order-content">
				<div class=" content" v-for="(order,index) in orderlist" :key="index">
					<ul>
						<!-- 我的订单表头 -->
						<li class="order-info">
							<div class="order-id">订单编号: {{order.orderItem[0].orderSn}}</div>
							<div style="margin-left: 440px;" class="order-id">未支付</div>
							<div class="order-time">订单时间: {{order.orderItem[0].gmtCreate}}</div>
						</li>
						<li class="header">
							<div class="pro-img">图片</div>
							<div class="pro-name">商品名称</div>
							<div class="pro-price">单价</div>
							<div class="pro-num">数量</div>
							<div class="pro-total">小计</div>
						</li>
						<!-- 我的订单表头END -->

						<!-- 订单列表 -->
						<li class="product-list" v-for="(item,i) in order.orderItem" :key="item.id">
							<div class="pro-img">
								<router-link :to="{  path: '/goods/details', query: {productID:item.productId} }">
									<img :src="item.productImage" />
								</router-link>
							</div>
							<div class="pro-name">
								<router-link :to="{  path: '/goods/details', query: {productID:item.productId} }">{{item.productName}}</router-link>
							</div>
							<div class="pro-price">单价:{{item.price.toFixed(2)}}元</div>
							<div class="pro-num">{{item.count}}</div>
							<div class="pro-total pro-total-in">{{(item.price * item.count).toFixed(2)}}</div>
						</li>
					</ul>
					<div class="order-bar">
						<div class="order-bar-left">
							<span class="order-total">
								共
								<span class="order-total-num">{{getOrderItemCount(order.orderItem)}}</span> 件商品
							</span>
						</div>
						<div class="order-bar-right" style="margin-right: 20px;">
							<span style="margin-right: 50px;">
								<span class="total-price-title">合计：</span>
								<span class="total-price">{{getOrderPrice(order.orderItem)}}</span>
							</span>

							<el-button type="primary" @click="goPay(order)">去支付</el-button>

						</div>
						<!-- 订单列表END -->
					</div>
				</div>
			</div>
			<div style="margin-top:-40px;"></div>
		</div>
		<!-- 我的订单主要内容END -->

		<!-- 订单为空的时候显示的内容 -->
		<div v-else class="order-empty">
			<div class="empty">
				<h2>您没有未支付订单！</h2>
				<p>快去购物吧！</p>
			</div>
		</div>
		<!-- 订单为空的时候显示的内容END -->
	</div>
	</div>
</template>

<script>
	import OrderAPI from '../../api/order.js'
	
	export default {
		name: 'MyNoPayOrder',
		props: {
			orderlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			// 每个订单多少件商品
			getOrderItemCount(orderItem) {
				var count = 0
				orderItem.forEach(item => {
					count = count + item.count
				})
				return count
			},
			// 每个订单多少钱
			getOrderPrice(orderItem) {
				var orderPrice = 0
				orderItem.forEach(item => {
					orderPrice = orderPrice + (item.price)*(item.count)
				})
				return orderPrice.toFixed(2)
			},
			async goPay(order) {
				console.log('order', order);
				this.notifySucceed("支付成功！")
				var res = await OrderAPI.changeOrderStatus(order.orderItem[0].orderId,1)
				this.$router.replace({
					path: 'payFinish'
				})
			}
		}
	}
</script>


<style scoped>
	.order {
		background-color: #f5f5f5;
		padding-bottom: 20px;
	}

	/* 我的订单头部CSS */
	.order .order-header {
		height: 64px;
		border-bottom: 2px solid #ff6700;
		background-color: #fff;
		margin-bottom: 20px;
	}

	.order .order-header .order-header-content {
		width: 1225px;
		margin: 0 auto;
	}

	.order .order-header p {
		font-size: 28px;
		line-height: 58px;
		float: left;
		font-weight: normal;
		color: #424242;
	}

	/* 我的订单头部CSS END */
	.order .content {
		width: 1225px;
		margin: 0 auto;
		background-color: #fff;
		margin-bottom: 50px;
	}

	.order .content ul {
		background-color: #fff;
		color: #424242;
		line-height: 85px;
	}

	/* 我的订单表头CSS */
	.order .content ul .order-info {
		height: 60px;
		line-height: 60px;
		padding: 0 26px;
		color: #424242;
		border-bottom: 1px solid #ff6700;
	}

	.order .content ul .order-info .order-id {
		float: left;
		color: #ff6700;
	}

	.order .content ul .order-info .order-time {
		float: right;
	}

	.order .content ul .header {
		height: 85px;
		padding-right: 26px;
		color: #424242;
	}

	/* 我的订单表头CSS END */

	/* 订单列表CSS */
	.order .content ul .product-list {
		height: 85px;
		padding: 15px 26px 15px 0;
		border-top: 1px solid #e0e0e0;
	}

	.order .content ul .pro-img {
		float: left;
		height: 85px;
		width: 120px;
		padding-left: 80px;
	}

	.order .content ul .pro-img img {
		height: 80px;
		width: 80px;
	}

	.order .content ul .pro-name {
		float: left;
		width: 380px;
	}

	.order .content ul .pro-name a {
		color: #424242;
	}

	.order .content ul .pro-name a:hover {
		color: #ff6700;
	}

	.order .content ul .pro-price {
		float: left;
		width: 160px;
		padding-right: 18px;
		text-align: center;
	}

	.order .content ul .pro-num {
		float: left;
		width: 190px;
		text-align: center;
	}

	.order .content ul .pro-total {
		float: left;
		width: 160px;
		padding-right: 81px;
		text-align: right;
	}

	.order .content ul .pro-total-in {
		color: #ff6700;
	}

	.order .order-bar {
		width: 1185px;
		padding: 0 20px;
		border-top: 1px solid #ff6700;
		height: 50px;
		line-height: 50px;
		background-color: #fff;
	}

	.order .order-bar .order-bar-left {
		float: left;
	}

	.order .order-bar .order-bar-left .order-total {
		color: #757575;
	}

	.order .order-bar .order-bar-left .order-total-num {
		color: #ff6700;
	}

	.order .order-bar .order-bar-right {
		float: right;
	}

	.order .order-bar .order-bar-right .total-price-title {
		color: #ff6700;
		font-size: 14px;
	}

	.order .order-bar .order-bar-right .total-price {
		color: #ff6700;
		font-size: 30px;
	}

	/* 订单列表CSS END */

	/* 订单为空的时候显示的内容CSS */
	.order .order-empty {
		width: 1225px;
		margin: 0 auto;
	}

	.order .order-empty .empty {
		height: 300px;
		padding: 0 0 130px 558px;
		margin: 65px 0 0;
		background: url(/assets/imgs/cart-empty.png) no-repeat 124px 0;
		color: #b0b0b0;
		overflow: hidden;
	}

	.order .order-empty .empty h2 {
		margin: 70px 0 15px;
		font-size: 36px;
	}

	.order .order-empty .empty p {
		margin: 0 0 20px;
		font-size: 20px;
	}

	/* 订单为空的时候显示的内容CSS END */
</style>
